<template>
  <div>
    <input
      ref="excelInputRef"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleChange"
    />
    <div
      class="drop"
      @drop="handleDrop"
      @dragover="handleDragover"
      @dragenter="handleDragover"
    >
      <div class="w-[100%] min-h-[100%] flex-column-center" @click="handleUpload">
        <template v-if="!!excelData.file">
          <span class="file-name">
            {{ excelData.file.name }}
          </span>
        </template>
        <template v-else>
          <SvgIcon name="arhive" class="icon-28" />
          <span class="info"> {{ $t("common.uploadExcelInfo") }}</span>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
export default {
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function, // eslint-disable-line
  },
  setup(props) {
    const { beforeUpload, onSuccess } = props;
    const loading = ref(false);
    const excelData = reactive({
      file: null,
    });
    const excelInputRef = ref(null);
    const generateData = (file) => {
      excelData.file = file;
      onSuccess && onSuccess(excelData);
    };
    const handleDrop = (e) => {
      e.stopPropagation();
      e.preventDefault();
      if (loading.value) return;
      const files = e.dataTransfer.files;
      if (files.length !== 1) {
        ElMessage.error("Only support uploading one file!");
        return;
      }
      const rawFile = files[0]; // only use files[0]

      if (!isExcel(rawFile)) {
        ElMessage.error("Only supports upload .xlsx, .xls, .csv suffix files");
        return false;
      }
      upload(rawFile);
      e.stopPropagation();
      e.preventDefault();
    };
    const handleDragover = (e) => {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    };
    const handleUpload = () => {
      excelInputRef.value && excelInputRef.value.click();
    };
    const handleChange = (e) => {
      const files = e.target.files;
      const rawFile = files[0]; // only use files[0]
      if (!rawFile) return;
      upload(rawFile);
    };
    const upload = (rawFile) => {
      let el = document.getElementsByClassName("excel-upload-input")[0];
      el.value = null; // fix can't select the same excel
      if (!beforeUpload) {
        generateData(rawFile);
        return;
      }
      const before = beforeUpload(rawFile);
      if (before) {
        generateData(rawFile);
      }
    };
    const isExcel = (file) => {
      return /\.(xlsx|xls)$/.test(file.name);
    };

    const removeFile = () => {
      excelData.file = null;
    };
    return {
      loading,
      excelData,
      excelInputRef,
      handleDragover,
      handleChange,
      handleUpload,
      handleDrop,
      removeFile,
    };
  },
};
</script>

<style scoped lang="scss">
.excel-upload-input {
  display: none;
  z-index: -9999;
}

.drop {
  border: 2px dashed rgba(173, 170, 163, 1);
  border-radius: 16px;
  width: 100%;
  height: 160px;
  margin: 0 auto;
  cursor: pointer;

  span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20.27px;
    color: rgba(71, 71, 71, 1);
  }
}
</style>
